{{response.files.append(URL(r=request,c='static',f='jquery.dataTables.min.js'))}}
{{response.files.append(URL(r=request,c='static',f='demo_table.css'))}}
{{extend 'layout.html'}}

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    jQuery('.smarttable').dataTable();
} );
</script>

<h1>Segments by Pledgedrive</h1>

<button onclick="document.location='{{=URL(r=request,f='create_segment',args=pledgedrive.id)}}'">Create a New segment</button>

<table class="smarttable">
<thead>
    <th>Title</th>
    <th>start_time</th>
    <th>end_time</th>
    <th>description</th>
    <th>goal</th>
    <th>goal_type</th>
    <th>program</th>
    <th>challenge</th>
    <th>Actions</th>
</thead>
<tbody>
{{for segment in segments:}}
<tr>
    <td>{{=segment.title}}</td>    
    <td>{{=segment.start_time}}</td>
    <td>{{=segment.end_time}}</td>
    <td>{{=segment.description}}</td>
    <td>{{=segment.goal}}</td>
    <td>{{=segment.goal_type}}</td> 
    <td>{{=segment.program}}</td>
    <td>{{=segment.challenge}}</td>    
    <td>
    <a href="{{=URL(r=request,f='edit_segment',args=segment.id)}}">Edit</a>
    </td>
</tr>
{{pass}}
</tbody>
</table>
